<html>
  <head>
    <script type="text/javascript" src="js/prototype.js"></script>
    <link type="text/css" media="screen" rel="stylesheet" href="css/chromecast.css" charset="utf-8" /> 
        
    <script type="text/javascript">
      var bg = chrome.extension.getBackgroundPage();
                 
      var playing = false;
      var player = $("idplayer");
            
      var data = {};     
            
      function ouvreFeeds() {
        chrome.tabs.create({url:"feeds.html"});
      }
      
      function affiche() {
        if(bg.isPlaying()) {
          $('nowplaying').innerText = bg.titlePlaying();
          $('imgplaypause').src = 'images/pause.png';
        }
      }
      
      function nextPodcast() {
        bg.playNext();
      }
      
      function prevPodcast() {
        bg.playPrevious();
      }
      
      function displayPlaying() {
        if(bg.isPlaying()) {
          $('nowplaying').innerText = bg.titlePlaying();
          $('imgplaypause').src = 'images/pause.png';
          
          arrayPodcasts = $$('#podcast tr');
          
          for(i = 0; i < arrayPodcasts.length; i++) {
            arrayTds = arrayPodcasts[i].getElementsByTagName("td");
            arrayTds[0].removeClassName('playing');
            arrayTds[1].removeClassName('playing');
          }
          
          arrayTds = arrayPodcasts[bg.numPlaying()-1].getElementsByTagName("td");
          arrayTds[0].addClassName('playing');
          arrayTds[1].addClassName('playing');
        }
      }
      
      function togglePlayPause() {
        if(bg.nowplaying != "") {
          bg.togglePlay();
          if(bg.playing) {
            $('imgplaypause').src = 'images/pause.png';
          } else {
            $('imgplaypause').src = 'images/play.png';
          }
         } 
      }

	   function stopAction() { bg.stopAction(); }
	
      
      //function pause() { $('nowplaying').innerText = ""; }
      function stopplaying() { 
        $('nowplaying').innerHTML = "<span style='font-style:italic;'>Chromecast</span>"; 
        $('imgplaypause').src = 'images/play.png';
        arrayPodcasts = $$('#podcast tr');
          
        for(i = 0; i < arrayPodcasts.length; i++) {
          arrayTds = arrayPodcasts[i].getElementsByTagName("td");
          arrayTds[0].removeClassName('playing');
          arrayTds[1].removeClassName('playing');
        } 
      }
      
      function playerror(code) { 
        $('nowplaying').innerText = "ERROR : Unable to read source"; 
        $('imgplaypause').src = 'images/play.png';
        
        arrayPodcasts = $$('#podcast tr');
          
          for(i = 0; i < arrayPodcasts.length; i++) {
            arrayTds = arrayPodcasts[i].getElementsByTagName("td");
            arrayTds[0].removeClassName('playing');
            arrayTds[1].removeClassName('playing');
          } 
        
      }
            
    </script>
  </head>
  <body onload="affiche();">
    
    
    <div class="logo"></div>
    <div class="content">
    <div id="nowplaying"><span style="font-style:italic;" id="welcome">&nbsp;</span></div>
    <br />
    <table>
      <tr>
        <td><div class="button" onclick="prevPodcast();"><img src="images/prev.png" /></div></td>
        <td><div class="button" onclick="togglePlayPause();"><img id="imgplaypause" src="images/play.png" /></div></td>
        <td><div class="button" onclick="stopAction();"><img src="images/stop.png" /></div></td>
        <td><div class="button" onclick="nextPodcast();"><img src="images/next.png" /></div></td>
      </tr>
    </table>		
    <br /><br />
    
    <a href="javascript:ouvreFeeds();">Feeds</a>
    
    </div>
   </body>
</html>
